<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" th:href="@{/css/cropper.min.css}">
    <link rel="stylesheet" th:href="@{/css/ImgCropping.css}">

    <title>Hello, world!</title>
</head>

<body>

    <button type="button" class="layui-btn" id="uploadAvatar">
        <i class="layui-icon layui-icon-upload"></i>更换头像
    </button>

    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script type="text/javascript">
        layui.config({
            base: '/js/'
        }).use('avatar', function () {
            var avatar = layui.avatar;
            avatar.render({
                success: function (base64, size) {
                    console.log(base64);
                    console.log(size);
                }
            });
        });
    </script>
</body>

</html>